<template>
<!--  <NavBar />-->
  <div class="back">
    <div class="header">
      <img :src="img2" alt="logo" class="banner-img" />
    </div>
    <div class="content">
      <h2 class="title">学科资源</h2>
    </div>
    <div class="kade">
      <div class="kade-item primary">
        <h4 class="kade-title">小学课程</h4>
        <p class="kade-description">国家优质课程资源</p>
        <div class="grade-buttons">

          <button @click="goToCourse">一年级</button>
          <button @click="goToCourse">二年级</button>
          <button @click="goToCourse">三年级</button>
          <button @click="goToCourse">四年级</button>
          <button @click="goToCourse">五年级</button>
          <button @click="goToCourse">六年级</button>
        </div>
        <img class="kade-img" src="https://x-area-edu-web.ykt.eduyun.cn/img/xiaoxue-80cf0a91.png?x-eos-process=image/format,webp">
      </div>
      <div class="kade-item middle">
        <h4 class="kade-title">初中课程</h4>
        <p class="kade-description">国家优质课程资源</p>
        <div class="grade-buttons">
          <button @click="goToCourse">七年级</button>
          <button @click="goToCourse">八年级</button>
          <button @click="goToCourse">九年级</button>
        </div>
        <img class="kade-img" src="https://x-area-edu-web.ykt.eduyun.cn/img/chuzhong-605ae25d.png?x-eos-process=image/format,webp">
      </div>
      <div class="kade-item senior">
        <h4 class="kade-title">高中课程</h4>
        <p class="kade-description">国家优质课程资源</p>
        <div class="grade-buttons">
          <button @click="goToCourse">高中阶段</button>
        </div>
        <img class="kade-img" src="https://x-area-edu-web.ykt.eduyun.cn/img/gaozhong-d64058e7.png?x-eos-process=image/format,webp">
      </div>
    </div>
    <div class="img-teacher">
      <img :src="img3" alt="teacher" class="teacher-img" style="margin-left: 20%; margin-right: 20%;" />
    </div>
    <div class="teacher-good">
      <div class="teacher-good-item">
        <img src="https://bdcs-file-2.ykt.cbern.com.cn/e_teacher_studio/b1565429-4859-48ce-8356-c5ba7414aab1.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360" alt="teacher 1">
        <div class="teacher-info">
          <h4 class="teacher-name">肖敏名师工作室</h4>
          <p>成员 <span>7</span> | 资源数 <span>20</span></p>
          <p class="teacher-description">肖敏名师工作室共有成员6人：张莉（自贡市）、宾莎（泸州市江阳区）、唐兴友...</p>
          <p class="views">播放量 5.9万</p>
        </div>
      </div>
      <div class="teacher-good-item">
        <img src="https://bdcs-file-2.ykt.cbern.com.cn/e_teacher_studio/b8319e14-1b69-4381-89bc-3210d44a07d3.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360" alt="teacher 2">
        <div class="teacher-info">
          <h4 class="teacher-name">沈西德名师工作室</h4>
          <p>成员 <span>13</span> | 资源数 <span>19</span></p>
          <p class="teacher-description">沈西德，曾担任中学数学教学主任。</p>
          <p class="views">播放量 2.2万</p>
        </div>
      </div>
      <div class="teacher-good-item">
        <img src="https://bdcs-file-1.ykt.cbern.com.cn/e_teacher_studio/5faa66b4-713e-4477-a78e-2c37cd2f6156.jpg?size=320&x-eos-process=image/format,webp/resize,m_lfit,w_360" alt="teacher 3">
        <div class="teacher-info">
          <h4 class="teacher-name">文莉名校长工作室</h4>
          <p>成员 <span>17</span> | 资源数 <span>8</span></p>
          <p class="teacher-description">教育部中小学名校长领导工程文莉名校长工作室。</p>
          <p class="views">播放量 15.9万</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import img2 from "@/assets/images/img_1.png"; // 确保路径正确并且文件存在
import img3 from "@/assets/images/img_teacher.png";
import router from "@/router"; // 确保路径正确并且文件存在
const goToCourse = () => {
  router.push('/course'); // 跳转到课程教学页面
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: center;
  background: none;
  margin-top: 20px;
  margin-left: 20%;
  margin-right: 20%;
}
.back {
  background-color: #f8f8f8;
}
.content {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
.title {
  font-size: 24px;
  font-weight: bold;
}
.banner-img {
  max-width: 130%;
  height: auto;
  border-radius: 8px;
}
.kade {
  display: flex;
  justify-content: space-around;
  margin: 20px auto;
  padding: 20px 0;
  max-width: 1200px;
}
.kade-item {
  width: 30%;
  padding: 20px;
  background-color: #f4f8ff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}
.kade-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.kade-description {
  color: #666;
  margin-bottom: 10px;
}
.grade-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.grade-buttons button {
  background-color: #b0d1ff;
  border: none;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
  color: #333; /* 初始字体颜色 */
}
.grade-buttons button:hover {
  background-color: #007bff; /* 悬停时背景色 */
  color: white; /* 悬停时字体颜色 */
}
.kade-img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80px;
  height: auto;
}
.primary {
  background-color: #e4f2ff;
}
.middle {
  background-color: #ecfaf4;
}
.senior {
  background-color: #fff5e8;
}
.img-teacher {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
.teacher-img {
  max-width: 77%;
  height: auto;
  border-radius: 8px;
}
.teacher-good {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.teacher-good-item {
  display: flex;
  background-color: #f4f8ff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 25%; /* 调整宽度 */
  margin: 10px; /* 留出左右空白 */
  transition: transform 0.3s;
}

.teacher-good-item:hover {
  transform: scale(1.02); /* 鼠标移上去放大 */
}

.teacher-good-item img {
  width: 40%; /* 调整图片宽度 */
  height: 100%; /* 填满整个高度 */
  object-fit: cover; /* 保持比例 */
}

.teacher-info {
  padding: 20px;
  width: 60%; /* 调整信息宽度 */
}

.teacher-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.teacher-info p {
  color: #666;
  margin: 4px 0;
}

.teacher-info p span {
  font-weight: bold;
  color: #007bff; /* 数字颜色 */
}

.teacher-info .teacher-description {
  color: #999;
}

.teacher-info .views {
  color: #999;
}

.teacher-good-item:hover .teacher-name {
  color: #007bff; /* 鼠标移上去时字体颜色改变 */
}
</style>
